@use './themes';
@use '_variables' as v;

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	input[type='number']::-webkit-inner-spin-button,
	input[type='number']::-webkit-outer-spin-button {
		appearance: none;
		margin: 0;
	}
}

@layer components {
	.custom-scrollbar::-webkit-scrollbar {
		@apply w-1.5;
	}

	.custom-scrollbar::-webkit-scrollbar-thumb {
		@apply bg-gray-50 rounded-full;
	}
}

html,
body {
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;

	/* to allow gradient color to work and show at least solid color when over-scroll */
	background: v.use(v.$colors-background);
	background-color: v.use(v.$colors-background-color);
	color: black;
	scroll-behavior: smooth;
	@apply antialiased font-sans;
}

/* TODO: Remove after we enable CSS Reset */
button {
	@apply font-sans;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background: url('_assets/images/primary_wallet_bg.svg') no-repeat center center;
	background-size: cover;
	position: relative;
}

#root {
	display: flex;
	align-items: center;
	justify-content: center;
}

* {
	box-sizing: border-box;
}

.btn {
	padding: 15px;
	border-radius: 4px;
	background-color: #8bc3df;
	text-decoration: none;
	border: none;
	display: inline-block;
	font-weight: 700;
	cursor: pointer;
	color: black;

	&.link {
		background-color: transparent;
	}

	&:visited,
	&:active {
		color: inherit;
	}

	&.disabled,
	&[disabled] {
		cursor: initial;
		color: #707070;
	}
}

input:focus,
textarea {
	outline: none !important;
}

textarea {
	font-family: 'Inter Variable', sans-serif;
}

input {
	font-family: 'Inter Variable', sans-serif;
}

// remove default password reveal button edge
::-ms-reveal {
	display: none;
}

@font-face {
	font-family: 'Frankfurter Normal';
	src:
		url('../assets/fonts/FrankfurterNormal.woff2') format('woff2'),
		url('../assets/fonts/FrankfurterNormal.woff') format('woff');
}

@keyframes fade-in-up {
	0% {
		opacity: 0.2;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
